<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="../../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
	<div class="mainBox">
		<div class="pear-container">
			<div class="layui-card">
				<div class="layui-card-body">
					<form class="layui-form" action="">
						<div class="layui-form-item">
							<div class="layui-form-item layui-inline">
								<label class="layui-form-label">账号</label>
								<div class="layui-input-inline">
									<input type="text" name="username" placeholder="" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item layui-inline">
								<label class="layui-form-label">姓名</label>
								<div class="layui-input-inline">
									<input type="text" name="nickname" placeholder="" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item layui-inline">
								<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="data-table-query-filter">
									<i class="layui-icon layui-icon-search"></i>查询
								</button>
								<button type="reset" class="pear-btn pear-btn-md">
									<i class="layui-icon layui-icon-refresh"></i>重置
								</button>
							</div>
						</div>
					</form>
				</div>
			</div>
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md3">
					<div class="layui-card">
						<div class="layui-card-body">
							<div id="deptTree"></div>
						</div>
					</div>
				</div>
				<div class="layui-col-md9">
					<div class="layui-card">
						<div class="layui-card-body">
							<table id="data-table" lay-filter="data-table-filter"></table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="bottom">
		<form class="layui-form" action="" lay-filter="select-form-filter">
			<div class="layui-form-item">
				<label class="layui-form-label" style="width: 80px;">已选择:</label>
				<div class="layui-input-block" style="margin-left: 110px;">
					<div class="layui-btn-container tag" lay-allowclose="true" lay-filter="tag-filter"></div>
				</div>
			</div>
		</form>
	</div>

	<script type="text/html" id="toolbarLeftTpl">

	</script>
	<script type="text/html" id="operationTpl">
		<button class="pear-btn pear-btn-xs pear-btn-primary" lay-event="detail" title="详情"><i class="layui-icon layui-icon-eye"></i></button>
	</script>

	<script src="../../../component/layui/layui.js"></script>
	<script src="../../../component/pear/pear.js"></script>
	<script>
		layui.use(['table', 'form', 'jquery','layer', 'admin', 'dict', 'tree', 'tag'], function() {
			let table = layui.table;
			let form = layui.form;
			let $ = layui.jquery;
			let layer = layui.layer;
			let admin = layui.admin;
			let dict = layui.dict;
			let tree = layui.tree;
			let tag = layui.tag;
			let url = layui.url();
			let tableSelectType = url.search.multiple == 'true' ? 'checkbox' : 'radio';

			$.get('/vtl-dept/layuiTree', function(result){
				tree.render({
					elem: '#deptTree',
					data: result,
					showCheckbox: false,  // 是否显示复选框
					showLine: true,  // 是否开启连接线
					onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
					//id: 'deptTree',
					isJump: false, // 是否允许点击节点时弹出新窗口跳转
					click: function(obj) {
						let data = obj.data;  //获取当前点击的节点数据
						window.refresh({ deptId: obj.data.id });
					}
				});
			});

			let cols = [[
				{ type: tableSelectType, hide: false, fixed: 'left' },
				{ field: 'nickname', title: '姓名', width: 120, fixed: 'left' },
				{ field: 'id', title: 'ID', width: 200, hide: true },
				{ field: 'username', title: '账号', width: 120 },
				{ field: 'gender', title: '性别', width: 70, templet: function(d) {
					return dict.label('vtl_user_gender', d.gender, true);
				} },
				{ field: 'idCardNumber', title: '身份证号', hide: true },
				{ field: 'email', title: '邮箱' },
				{ field: 'mobilePhone', title: '电话', width: 150 },
				{ field: 'disabled', title: '账号状态', width: 120, hide: true, templet: function(d) {
					return dict.label('vtl_disabled', d.disabled, true);
				} },
				{ field: 'createByName', title: '创建者', width: 120, hide: true },
				{ field: 'createTime', title: '创建时间', width: 160, hide: true, templet: function (d) {
					return layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss");
				}},
				{ field: 'updateByName', title: '更新者', width: 120, hide: true },
				{ field: 'updateTime', title: '更新时间', width: 160, hide: true, templet: function (d) {
					return layui.util.toDateString(d.updateTime, "yyyy-MM-dd HH:mm:ss");
				}},
				//{ field: 'operation', title: '操作', width: 70, fixed: 'right', templet: '#operationTpl' }
			]]


			table.render({
				elem: '#data-table',
				url: '/vtl-user/page',
				where: { disabled: 0 },
				request: {
					pageName: 'current', // 页码的参数名称，默认：page
					limitName: 'size' // 每页数据条数的参数名，默认：limit
				},
				parseData: function(res) {
					return {
						"code": 0,
						"msg": 'SUCCESS',
						"count": res.total,
						"data": res.records
					};
				},
				page: true,
				cols: cols,
				skin: 'line',
				size: 'sm',
				toolbar: '#toolbarLeftTpl',
				defaultToolbar: [{ title: '刷新', layEvent: 'refresh', icon: 'layui-icon-refresh'}, 'filter']
			});

			table.on('toolbar(data-table-filter)', function(obj) {
				if (obj.event === 'refresh') {
					window.refresh(false);
				}
			});

			table.on('tool(data-table-filter)', function(obj) {
				let row = obj.data;
				switch (obj.event) {
					case 'detail':
						window.detail(row.id);
						break;
					default:
						break;
				}
			});

			// 复选框事件
			table.on('checkbox(data-table-filter)', function(obj){
				// console.log(obj); // 查看对象所有成员
				// console.log(obj.checked); // 当前是否选中状态
				// console.log(obj.data); // 选中行的相关数据
				// console.log(obj.type); // 若触发的是全选，则为：all；若触发的是单选，则为：one
				if(obj.checked) {
					if(obj.type == 'all') {
						let allData = table.getData('data-table');
						$.each(allData, function(index, row){
							window.addTag(row.id, row.nickname);
						});
					} else {
						window.addTag(obj.data.id, obj.data.nickname);
					}
				} else {
					if(obj.type == 'all') {
						let allData = table.getData('data-table');
						$.each(allData, function(index, row){
							window.deleteTag(row.id);
						});
					} else {
						window.deleteTag(obj.data.id);
					}
				}
			});

			// 单选框事件
			table.on('radio(data-table-filter)', function(obj){
				// console.log(obj); // 当前行的一些常用操作集合
				// console.log(obj.checked); // 当前是否选中状态
				// console.log(obj.data); // 选中行的相关数据
				if(obj.checked) {
					window.clearTag();
					window.addTag(obj.data.id, obj.data.nickname);
				}
			});

			form.on('submit(data-table-query-filter)', function(data) {
				window.refresh(data.field);
				return false;
			});

			window.refresh = function(field = {}, deep = false) {
				$.vtl.tableReloadData('data-table', field, deep);
			}

			window.detail = function(id, title = '用户详情') {
				top.layui.admin.jump('vtl-user-' + id, title, 'views/system/user/detail.html?id=' + id)
			}

			window.addTag = function(id, text) {
				if(id) {
					let checkExist = $('div[lay-filter=tag-filter] > button[lay-id=' + id + ']');
					if(checkExist.length == 0) {
						tag.add('tag-filter', {id: id, text: text });
					}
				}
			}

			window.deleteTag = function(id) {
				if(id) {
					tag.delete('tag-filter', id);
				}
			}

			window.clearTag = function() {
				$('div[lay-filter=tag-filter] > button').each(function(index){
					window.deleteTag($(this).attr('lay-id'));
				});
			}

			window.getCheckedIdList = function() {
				let result = [];
				$('div[lay-filter=tag-filter] > button').each(function(index){
					result.push($(this).attr('lay-id'));
				});
				return result;
			}

		})
	</script>
</body>
</html>
